<template>
  <div>
    <div class="textBox" @click="toAnnouncement">
      <transition name="slide">
        <p class="text" :key="text.id">
          <el-tag type="warning">{{ text.val.tag }}</el-tag>
          <span style="position: relative; top: 3px; margin-left: 10px">{{
            text.val.title
          }}</span>
        </p>
      </transition>
    </div>
  </div>
</template>

<script>
import api from './api'
export default {
  name: "announcement",
  data () {
    return {
      textArr: [
      ],
      number: 0
    };
  },
  computed: {
    text () {
      return {
        id: this.number,
        val: this.textArr[this.number],
        timer: null
      };
    },
  },
  async created () {
    // this.getAnnoucement()
    await this.getAnnoucementList()
  },
  mounted () {
    this.startMove();
  },
  methods: {
    async getAnnoucementList () {
      const { data, code, message } = await api.getAnnouncementList()
      // console.log('data', data)
      if (code === 0) {
        this.textArr = data.data.map(val => {
          return {
            tag: '公告',
            title: val.title
          }
        })
      } else {
        this.$message.error(message)
      }
    },
    toAnnouncement () {
      this.$router.push('/announce/manager')
    },
    // getAnnoucement () {
    //   this.$http_json({
    //     url: "/api/announcement/list",
    //     method: "get"
    //   }).then(res => {
    //     this.textArr = res.data.map(val => {
    //       return {
    //         tag: "公告",
    //         title: val.content
    //       }
    //     })
    //   })
    // },
    startMove () {
      // console.log('testArr2', this.testArr)
      // eslint-disable-next-line
      this.timer = setTimeout(() => {
        if (this.number === this.textArr.length) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 3000); // 滚动不需要停顿则将2000改成动画持续时间
    },
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  },
};
</script>

<style scoped>
.textBox {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.text {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-enter {
  transform: translateY(20px) scale(1);
  opacity: 1;
}
.slide-leave-to {
  transform: translateY(-20px) scale(0.8);
  opacity: 0;
}
</style>